<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
        }
        .myborder{
            border: 3px solid greenyellow;
        }
    </style>
</head>
<body>
    <!-- 
        用于处理html标签动态属性
        v-bind : 属性 = 表达式
        简写 ：属性 = 表达式 
    -->
    <div id="box">
        <!-- 方式一：* 动态绑定属性,可以是 class 也可以 src id ... -->
        <div v-bind:class="myClass">我是一个div</div>
        <div :class="myClass">我是一个div2</div>
        <!-- 方式二：* 动态绑定类名称,{类样式名称：表达式条件} -->
        <div :class="{active:hasActive}">我是一个div3</div>
        <div :class={active:hasActive,myborder:hasBorder}>我是一个div4</div>
        <div v-bind:class="classObj">我是一个div5</div>
        <!-- 方式三：类名作为一组属性值 -->
        <div :class="[classA,classB]">我是一个div6</div>
        <!-- isShow可以换成1>1 -->
        <div :class="[classA,isShow?'':classB]">我是一个div7</div> 
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                // 动态绑定属性
                myClass:"active123",
                hasActive:true,
                hasBorder:true,
                classObj:{
                    'active':false,
                    'myborder':true
                },
                classA:'active',
                classB:'myborder',
                isShow:false // 1>1
            }
        })
    </script>
</body>
</html>